<div ms-controller="invite" id="page_invite" ms-visible="nowPage=='invite'">

    <style>
        #page_invite header {
            background-color: #383431;
            position: fixed;
            top: 0;
            width: 100%;
            height: 45px;
            color: white;
            text-align: center;
            z-index: 999;
        }

        #page_invite header > b {
            display: block;
            margin-top: 10px;
        }

        #page_invite .icon-back {
            left: 7px;
            margin-top: 7px;
            float: left;
            vertical-align: middle;
        }

        #page_invite .oneBox {
            margin-bottom: 10px;
            background-color: white;
            border-bottom: solid 1px #e2e2e2;
        }

        #page_invite .oneBox.title {
            min-height: 90px;
        }

        #page_invite .avatar + div {
            padding: 10px 0 0 0;
            margin: 0 20px 10px 110px;
        }

        #page_invite h1 {
            color: #888;
        }

        #page_invite p {
            padding-top: 10px;
            color: #1a1a1a;
        }

        #page_invite .avatar {
            vertical-align: top;
            display: inline-block;
            margin: 10px 15px;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            overflow: hidden;
        }

        #page_invite .avatar > img {
            width: 70px;
            height: 70px;
        }

        #page_invite .f-line {
            background-color: white;
            border-top: solid 1px #e2e2e2;
            width: 100%;
        }

        #page_invite .f-label {
            vertical-align: top;
            display: inline-block;
            width: 80px;
            color: #797979;
            padding: 10px 5px 10px 20px;
        }

        #page_invite .f-text {
            width: calc(100% - 120px);
            vertical-align: top;
            padding: 10px 5px 10px 0;
            display: inline-block;
            color: #1a1a1a;
        }

        #page_invite .f-text > label {
            margin: 0 10px 0 0;
        }

        #page_invite .timeAr {
            width: calc(100% - 120px);
            vertical-align: top;
            display: inline-block;
            color: #1a1a1a;
        }

        #page_invite select:first-child {
            border-bottom: solid 1px #e2e2e2;
        }

        #page_invite select {
            padding: 10px 0;
            margin-left: -5px;
            display: block;
        }

        #page_invite select > option:first-child {
            color: #797979;
        }

        #page_invite .btn-getVec {
            background-color: #fec418;
            color: white;
            position: absolute;
            float: right;
            text-align: center;
            padding: 11px 10px;
            margin-top: -1px;
            margin-right: -9px;
            width: 75px;
            right: 9px;
        }

        #page_invite .btn-getVec.un {
            background-color: #dddddd;
            color: #aaaaaa;
        }

        #page_invite .btn-normal {
            border-radius: 999px;
            border: solid 2px #ffbb77;
            background-color: transparent;
            color: #1a1a1a;
            text-align: center;
            margin: 40px 20px;
            padding: 10px;
            width: calc(100% - 64px);
        }

        #page_invite .btn-normal:active {
            border: solid 2px #ffbb77;
            background-color: #ffbb77;
            color: white;
        }

        #page_invite .oneBox .oneBar > * {
            vertical-align: middle;
        }

        #page_invite .oneBox .oneBar > img {
            margin: 8px 20px;
            width: 36px;
            height: 36px;
        }

        #page_invite .oneBox .oneBar > label > div {
            margin: 15px 20px;
            float: right;
        }

        #page_invite #stepFail .hImg {
            margin: 10px 20px;
            padding-bottom: 60px;
            width: calc(100% - 40px);
            height: 150px;
            background: url(imgs/img_payfail.png) no-repeat center;
            background-size: 50%;
            border-bottom: solid 1px #d8d8d8;
        }

        #page_invite #stepFail .tip {
            margin-top: 30px;
            width: 100%;
            text-align: center;
            color: #797979;
        }

        #page_invite #stepSuccess .hImg {
            width: 100%;
        }
    </style>

    <div id="step1" ms-visible="step=='step1'">
        <header>
            <b class="f36">预约</b>
        </header>

        <div class="blank" style="height:45px;"></div>
        <div class="oneBox title">
            <div class="avatar p-a">
                <img ms-src="avatar"/>
            </div>
            <div>
                <h1 class="f32">{{nickname}}</h1>

                <p class="f28" ms-if="deposit=0">{{faith|html}}</p>

                <p class="f36" ms-if="deposit>0">定金：{{deposit|f$current}}</p>
            </div>
        </div>

        <div class="oneBox">
            <div class="f-line">
                <div class="f28 f-label">姓名</div>
                <input class="f28 f-text" type="text" ms-duplex="name" placeholder="填写姓名" maxlength="8">
            </div>
            <div class="f-line">
                <div class="f28 f-label">手机号</div>
                <input class="f28 f-text" type="tel" ms-duplex="phonenum" placeholder="填写手机号" maxlength="11">
            </div>
            <div class="f-line" ms-visible="phonenum!=ph$old">
                <div class="f28 btn-getVec" ms-click="vec$get" ms-class-un="phonenum.length!=11||vec$rem>0"
                     ms-visible="vec$rem==0">获取验证码
                </div>
                <div class="f28 btn-getVec" ms-class-un="phonenum.length!=11||vec$rem>0" ms-visible="vec$rem!=0">
                    剩余{{vec$rem}}秒
                </div>
                <div class="f28 f-label">验证码</div>
                <input class="f28 f-text" type="tel" ms-duplex="vec" placeholder="填写验证码" maxlength="6">
            </div>
        </div>

        <div class="oneBox">
            <div class="f-line">
                <div class="f28 f-label">服务时间</div>
                <div class="timeAr">
                    <select id="indate" class="f32" ms-duplex="date">
                        <option value=0 disabled="true">预约日期</option>
                        <option ms-repeat="op$date" ms-attr-value="el.value">{{el.str}}</option>
                    </select>
                    <select id="intime" class="f32" ms-duplex="time">
                        <option value=0 disabled="true">预约时间</option>
                        <option ms-repeat="op$time" ms-attr-value="el.value">{{el.str}}</option>
                    </select>
                </div>
            </div>
            <div class="f-line">
                <div class="f28 f-label">门店地址</div>
                <div class="f28 f-text">{{address|f$null}}</div>
            </div>
            <div class="f-line">
                <div class="f28 f-label">预约内容</div>
                <textarea class="f28 f-text" ms-duplex="remark" placeholder="预约内容" maxlength="64"></textarea>
            </div>
        </div>

        <div class="f36 btn-normal" ms-click="postOrder" ms-if="deposit==0">提交</div>
        <div class="f36 btn-normal" ms-click="tab($event,'step2')" ms-if="deposit>0">支付定金</div>

    </div>

    <div id="step2" ms-visible="step=='step2'">
        <header>
            <a ms-click="tab($event,'step1')" class="icon-back p-a"></a>
            <b class="f36">预约</b>
        </header>

        <div class="blank" style="height:45px;"></div>
        <div class="oneBox title">
            <div class="avatar p-a">
                <img ms-src="avatar"/>
            </div>

            <div class="info">
                <h1 class="f32">{{nickname}}</h1>

                <h2 class="f36">{{deposit|f$current}}</h2>
            </div>

        </div>

        <div class="oneBox">
            <div class="oneBar">
                <img src="./imgs/wxpay.png"/>
                <label for="channal_wx_pub">
                    <span class="f32">微信支付(推荐)</span>
                    <input id="channal_wx_pub" class="icheck" type="radio" value="channal_wx_pub" name="iCheck"
                           ms-duplex="channal">
                </label>
            </div>
        </div>

        <div class="f36 btn-normal" ms-click="postOrder">去支付</div>

    </div>

    <div id="stepFail" ms-visible="step=='stepFail'">

        <div class="hImg"></div>
        <h1 class="f32 tip">支付没有完成哦，请尝试重新支付</h1>

        <div class="f36 btn-normal" ms-click="payOrder">重新支付</div>

    </div>

    <div id="stepSuccess" ms-visible="step=='stepSuccess'">

        <img class="hImg" src="./imgs/paySuccess.png"/>

    </div>


</div>